<template>
  <div class="home">
    <!--<van-nav-bar class="home__header" :title="title" left-text="menu" @click-left="showPopup" right-text="添加" @click-right="showPopupRight" fixed placeholder>-->
      <van-nav-bar class="home__header" :title="title" left-text="menu" @click-left="showPopup"  fixed placeholder>
      <!--<van-button is-link @click="showPopup">展示弹出层</van-button>-->
    </van-nav-bar>
    <van-popup v-model="show" position="left" :style="{ width: '50%',height: '100%' }" ><left-nav></left-nav></van-popup>

    <van-popup v-model="showright" position="right" :overlay-style="{ backgroundColor: 'white',opacity:0.1 }" :style="{ width: '50%',height: '30%' }" ><left-nav></left-nav></van-popup>
    <div class="home__content">
      <router-view />

    </div>


    <van-tabbar route v-model="active" placeholder fixed>
      <!--<van-tabbar-item name="消息" to="/userInfo" icon="chat-o">-->
        <!--消息-->
      <!--</van-tabbar-item>-->
      <van-tabbar-item name="通讯录" to="/addressList" icon="cluster-o">
        通讯录
      </van-tabbar-item>
      <van-tabbar-item name="工作台" to="/workSpace" icon="apps-o">
        工作台
      </van-tabbar-item>
      <van-tabbar-item name="我的" to="/mine" icon="user-o">
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  // import UserList from "@views/UserList";
  import LeftNav from "@views/LeftNav";
export default {
  name: "home",
  components: {
    LeftNav
  },
  data() {
    return {
      title: "通讯录",
      active: 1,
      show: false,
      showright:false
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    showPopupRight() {
      this.showright = true;
    },
  },
};
</script>

<style lang="scss" scoped>
  .van-popup--right{
    top:20%
  }
.home {
  &__content {
    margin-top: 10px;
  }
}
</style>
